<template>
	<view class="pics">
		<scroll-view class="left" scroll-y>
			<view @click="selectd(index,item.id)" :class="active==index?'active':''" v-for="(item,index) in leftLists" :key="index">
				{{item.title}}
			</view>
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view class="item" v-for="(item,index) in secondData" :key="index">
				<image @click="previewImg(item.img_url)" :src="item.img_url"></image>
				<view>{{item.title}}</view>
			</view>
			<view class="msg" v-if="secondData.length==0">暂无数据</view>
		</scroll-view>
	</view>
</template>

<script>
	
	export default {
		data(){
			return {
				leftLists:[],
				active:0,
				secondData:[],
				color:'deeppink'
				
			}
		},
		onLoad(){
			this.getPicCate()
		},
		methods:{
			async getPicCate(){
					const res = await this.$myRequest({
						url:'/api/getimgcategory'
					})
					this.leftLists=res.data.message
					this.selectd(0,this.leftLists[0].id)
					console.log(this.secondData)
					
			},
			async selectd(index,id){
					this.active=index
					const res = await this.$myRequest({
						url:`/api/getimages/${id}`
					})
					this.secondData=res.data.message
					
			},
			previewImg(current){
				const imgUrls= this.secondData.map((item)=>{
					return item.img_url
				})
				uni.previewImage({
					current,
					urls:imgUrls
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.pics{
		overflow: hidden;
		display: flex;
		height: 100%;
		.left{
			height:100%;
			width:200rpx;
			border-right: 1rpx solid #ccc;
			view{
				height: 120rpx;
				line-height: 120rpx;
				font-size:40rpx;
				text-align: center;
				border-bottom: 1rpx solid #eee;
			}
			.active{
				background-color: $shop-color;
			}
		}
		.right{
			width:520rpx;
			height:100%;
			margin:0 auto;
			padding-top: 12rpx;
			.item{
				
				box-shadow: 0 8px 8px rgba(10,16,20,.24),0 0 8px rgba(10,16,20,.12);
				
				margin-top:26rpx;
				image{
					width: 520rpx;
					height:520rpx;
					border-radius: 20rpx;
					
				}
				view{
					padding:0 8rpx;
					line-height: 60rpx;
					font-size: 30rpx;
				}
			}
			.msg{
				width:100%;
				height:100%;
				display: flex;
				justify-content: center;
				align-items: center;
				color:$shop-color;
				font-size:40rpx;
			}
		}
	}
	
	
</style>
